<template>
	<view class="question">
		<scroll-view class="content" scroll-y="true">
			<view class="item" :class="{reverse:item.role=='user'}"   v-for="(item,index) in historys">
				<uni-icons style="border: 0;" :type="item.role=='user'?'chatboxes':'chatbubble'" color="orange" size="25"></uni-icons>
				<text>{{item.content}}</text>				
			</view>
		</scroll-view>
		<view class="bottom">
			<uni-easyinput v-model="word" placeholder="请输入问题" />
			<button type="default" @tap="question" size="mini">提问</button>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"
	// 问话模型
	let model = ref({
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3,

	})
	// 文化的历史记录
	let historys = ref([])

	let word = ref("")
	async function question() {
		historys.value.push({
			"role": "user",
			"content": word.value
		})
		model.value.messages = historys.value
		let res = await uni.$post(CONFIG.kimi_url, model.value)
		historys.value.push(res.data.choices[0].message)
		console.log(historys.value)
		word.value=""
	}
</script>

<style scoped lang="scss">
	.question {
		position: relative;
		height: calc(100vh - 97px);
		background-color: #f7f7f7; // 聊天界面背景色
		padding: 10px; // 聊天界面padding

		.content {
			height: calc(100vh - 140px);
			overflow-y: auto; // 确保内容可以滚动
			padding: 10px; // 滚动内容的padding

			.item {
				display: flex;
				margin-bottom: 8px; // 每条消息之间的间距
				align-items: center;

				&.reverse {
					justify-content: flex-end; // 用户消息靠右显示
				}

				uni-icons {
					margin-right: 8px; // 图标与文本之间的间距
				}

				text {
					border: 1px solid #ccc;
					border-radius: 5px;
					padding: 8px 12px;
					background-color: #fff; // 消息背景色
					max-width: 70%; // 消息最大宽度
					word-wrap: break-word; // 长文本自动换行
				}
			}
		}

		.bottom {
			padding: 10px;
			background-color: #fff; // 输入框背景色
			border: 1px solid #ccc; // 输入框边框
			width: 100%; // 输入框宽度
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;

			uni-easyinput {
				flex: 1;
				margin-right: 8px; // 输入框与按钮之间的间距
				padding: 8px; // 输入框padding
				border: 1px solid #ccc; // 输入框边框
				border-radius: 5px; // 输入框圆角
			}

			button {
				padding: 8px 16px; // 按钮padding
				background-color: #007aff; // 按钮背景色
				color: #fff; // 按钮文字颜色
				border: none; // 按钮无边框
				border-radius: 5px; // 按钮圆角
				cursor: pointer; // 鼠标悬停时显示指针
			}
		}
	}
</style>